<template>
    <section class="collect_server_from overflowYAll">
		<el-form ref="form" :model="form" :rules="rules" label-width="106px" >
			<el-form-item label="服务名称 " required prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			  
			<el-form-item label="服务标识 ">
				<span>由系统自动生成</span>
			</el-form-item>
			  
			<el-form-item label="资源所在网段">
				<el-radio-group v-model="form.segmentId" @change ="chooseResource" >
					<el-radio v-for="(item,index) in treeSeach.segment"
						:label="item.id" 
						:value="item"
						:key="index">
						{{item.name}}
					</el-radio>
				</el-radio-group>
    		</el-form-item>
			  
			<!--业务类型，信息类型多选-->
			<yw-info-desc-form 
				:yewuType="treeSeach.business_type"
				:infoType="treeSeach.info_type"
				:timeSubmit="ywInfoDescTimeOut"
				@outPutForm = "ywInfoDescOutPutForm"
				:hasDataYwInfoDesc="hasDataYwInfoDesc"
				>
			</yw-info-desc-form>
				
			<el-form-item label="运行计划">
				<el-radio-group v-model="collectServerFrom.yunxingPlane" @change="changeYunxingPlane">
					<el-radio-button class="box-radio" label="1">分钟</el-radio-button>
					<el-radio-button class="box-radio" label="2">小时</el-radio-button>
					<el-radio-button class="box-radio"  label="3">日</el-radio-button>
					<el-radio-button class="box-radio"  label="4">周</el-radio-button>
					<el-radio-button class="box-radio"  label="5">月</el-radio-button>
				</el-radio-group>
			</el-form-item>
				
			<yunxing-plane 
				@outPutForm = "yunxingPlaneOutPutForm"
				:timeSubmit = "yunxingPlaneTimeOut" 
				:hassmRunPlan = "hassmRunPlan"
				:showYunxingPlane="showYunxingPlane">
			</yunxing-plane><!--运行计划-->
				
			<el-form-item label="发布区域(单选)">
				<el-radio-group v-model="form.nodeIds" @change="changefbArea">
					<el-radio-button class="box-radio" 
						v-for="(item,index) in fabuAreaRadio" 
						:label="item.id" 
						:name = "item.name" 
						:key="index"
						>{{item.name}}
					</el-radio-button>
				</el-radio-group>
				
				<div class="" style="margin-top: 15px;" v-if="fabuAreaRadio.length!=0">
					<p>CPU  剩余 {{fabuAreaRadio[choosedFbArea].cpuNum}}核分配     <el-input  v-model="form.cpuNum" style="width: 150px;"></el-input>核</p>
					<p>内存  剩余 {{fabuAreaRadio[choosedFbArea].memory}}G分配     <el-input  v-model="form.memory" style="width: 150px;"></el-input>G</p>
				</div>
			</el-form-item>
				
			<!--这里开始是secondForm2-->
			<el-form-item label="数据来源">
				<el-radio-group v-model="form.inServiceDataSource.type" @change="changeFBjiedian">
					<el-radio-button class="box-radio" label="2">文件</el-radio-button>
					<el-radio-button class="box-radio"  label="3">数据库</el-radio-button>
				</el-radio-group>
			</el-form-item>
    			
			<!--文件的form-->
			<wenjian-form 
				:secondFormWenjianForm="secondFormWenjianForm"
				:resourceWeb= "resourceWeb"
				@outPutForm="wenjianOutPutFormSecondForm"
				:timeSubmit="wenJianTimeOutSecondForm"
				v-show="secondForm==='2'" 
				:inputOrOutput='laiyuan' >
			</wenjian-form>
			
			<!--数据库的form-->
			<datadb-form  
				:secondFormDBdataForm = "secondFormDBdataForm"
				@outPutForm="dbtadbOutPutFormSecondForm"
				:timeSubmit="dbtadbTimeOutSecondForm"
				:resourceWeb= "resourceWeb"
				:tableNameDb= "tableNameDb"
				v-show="secondForm==='3'" 
				:inputOrOutput='laiyuan'>
			</datadb-form>
    			
			<!--***************这里开始是thirdForm**********************************-->
			<el-form-item label="数据目的地" style="margin-top: 25px;">
				<el-radio-group v-model="form.outServiceDataSource.type" @change="changeDataMudi">
					<el-radio-button class="box-radio" label="2">文件</el-radio-button>
					<el-radio-button class="box-radio"  label="3">数据库</el-radio-button>
				</el-radio-group>
			</el-form-item>
    			
			<!--文件的form-->
			<wenjian-form 
				:thirdFormWenjianForm="thirdFormWenjianForm"
				:timeSubmit="wenJianTimeOutThirdForm"
				@outPutForm="wenjianOutPutFormThirdForm"
				:resourceWeb= "resourceWeb2"
				v-show="thirdForm==='2'" 
				:inputOrOutput='mudi'>
			</wenjian-form>
				
			<!--数据库的form-->
			<!-- <datadb-form  
				:thirdFormDBdataForm="thirdFormDBdataForm"
				:timeSubmit="dbtadbTimeOutThirdForm"
				@outPutForm="dbtadbOutPutFormThirdForm"
				:resourceWeb= "resourceWeb2"
				v-show="thirdForm==='3'" 
				:inputOrOutput='mudi'>
			</datadb-form> -->
			<destination-data
				:thirdFormDBdataForm="thirdFormDBdataForm"
				:timeSubmit="dbtadbTimeOutThirdForm"
				:resourceWeb="resourceWeb2"
				:sourceField="sourceField"
				v-show="thirdForm==='3'"
				@outPutForm="dbtadbOutPutFormThirdForm"
				>
			</destination-data>
		</el-form>
			
		<p class="fixed_button">
			<el-button type="primary" @click="goBack">取消</el-button>
			<el-button type="primary" @click="pushForm">提交</el-button>
		</p>
    </section>
</template>

<script>
    import yunxingPlane from "./components/yunxingPlane"
    import wenjianForm from "./components/collectWenjian"
    import datadbForm from "./components/collectDbdata"
		import ywInfoDescForm from "../common/yw_info_desc"
		import destinationData from "./components/destinationData"
    import {
     	componentGetYwType,
     	componentServerRegisterGetFabuArea,
     	componentCollectFormPush,
     	computedDealCollectUpdata,
     	componentCollectFormUpdata,
     	componentCollectAll,
			computedCheckName,
    } from "../common/js_css_img/serverResourceComputed"
    import {
     	apiGetCollectDetail
    } from "../common/js_css_img/serverResourceApi"
    export default {
    	components:{
    		yunxingPlane,
    		wenjianForm,
    		datadbForm,
				ywInfoDescForm,
				destinationData,
    	},
    	props:{
    		updataId:{
    			type:String,
    			default:0
    		}
    	},
        data() {
          	var checkName = (rule,value,callback)=>{
          		if (!value) {
		          	return callback(new Error('名字不能为空'));
		        }
          		computedCheckName(this,value,this.form.id,'zyzc');
	          	setTimeout(()=>{
					if(this.has){
						return callback(new Error('名称已存在，请重新输入'));
					}else {
						callback();  //必须要有回调，要不然表单无法提交
					}
		      	},1500)
          	};
          	return {
          		dbtadbTimeOutSecondForm:false,/*第二个数据库表单*/
          		dbtadbTimeOutThirdForm:false,/*第三个数据库表单*/
          		wenJianTimeOutSecondForm:false,/*第二个文件表单*/
          		wenJianTimeOutThirdForm:false,/*第三个文件表单*/
          		yunxingPlaneTimeOut:false,
          		ywInfoDescTimeOut:false,
          		resourceWeb:0,/*选中的资源网段*/
          		resourceWeb2:0,/*选中的区域所在的资源网段*/
							choosedFbArea:0,
							tableNameDb: '',	//来源表名
          		yewuType:[],
          		infoType:[],
          		fabuAreaRadio:[],
          		mudi:'mudi',
          		formLabel:[{options:[]}],
          		laiyuan:"laiyuan",
          		thirdForm:'',
          		secondForm:'',
          		showYunxingPlane:6,
          		hasDataYwInfoDesc:{
          			businessType:[],
          			infoType:[],
          			describe:'',
          		},
          		hassmRunPlan:{
          			endTime:"",
          			stratTime:'',
          			jiangeHours:"",
          			jutiTime:"",
          			chooseWeek:[],
          			everyMonth:[],
          		},
          		thirdFormWenjianForm:{
          			filePath:'',
          			connDatasourceId:'',
          			fileSaveNameRule:'',
          			outFileType:'',
          		},
          		secondFormWenjianForm:{
	          		specifyFileType:'',
	          		specifyValue:'',
	          		gatherMode:'',
	          		outFileType:'',
          		},
          		secondFormDBdataForm:{
          			connDatasourceId:'',
          		},
          		thirdFormDBdataForm:{
          			connDatasourceId:'',
							},
							sourceField: [], //对应来源字段
          		form:{
          			"id":0,
								"name":"",
								"segmentId":'', 
								'producerId': '',
								"type":'1',
								"businessType":"",
								"infoType":"",
								"describe": "",
								"nodeIds":"",
								"isRestart":'1',
								"smRunPlan":{},
								"memory":'',
								"cpuNum":'',
								"inServiceDataSource":{ 
									"type":'' 
									,"connDatasourceId":'' 
										,"filePath":""
										,"fileName":"文件"
										,"sql":''
									,"outputDataFormList":[
										
									]
								},
								"specifyFileType":'', 
								"specifyValue":"",
								"gatherMode":'',
								"outFileType":"",
								"outServiceDataSource":{
									"type":'',
									"connDatasourceId":'',
									"fileSaveNameRule":"",
									"filePath":"",
									"fileName":"gg",
									"inputDataFormList":[ 
										
									],
								}
							},
          		collectServerFrom:{
          			cpu:"",
          			memory:"",
          			name:'',
          			fuwuType:'',
          			yewuType:[],
          			infoType:[],
          			desc:'',
          			yunxingPlane:'',
          			stratTime:"",
          			jiangeHours:"",
          			endTime:'',
          			yichang:'',
          			fbJieDian:'',
          		},
          		fuwuTypeFileButton:false,
          		yewuType:[
          			
          		],
          		infoType:[
          			
          		],
          		treeSeach:{
	          		segment:[],/*网段类型*/
	          		info_type:[],/*信息类型*/
	          		business_type:[],/*业务类型*/
	          	},
	          	rules:{
	          		name: [
	          			{ validator: checkName, trigger: 'blur' }
	          		],
	          	}
          };
        },
        methods: {
			goBack(){
				this.$emit('goBack');
			},
			pushForm(){/*提交表单*/
				if(this.has){
					this.$message.error('名称已存在')
					return false;
				}
				this.form.nodeIds = this.fabuAreaRadio[this.choosedFbArea].id;
				this.ywInfoDescTimeOut=!this.ywInfoDescTimeOut;
			},
			upload(){
				
			},
			changeYunxingPlane(val){
				this.showYunxingPlane = val;
			},
			changeFBjiedian(val){
				this.secondForm = val;
			},
			upload(val){
				document.getElementById(val).click();
			},
			changeDataMudi(val){
				this.thirdForm = val;
			},
			changefbArea(val){/*选择发布区域*/
				this.choosedFbArea = val;
				console.log(val);
				this.resourceWeb2 = Number(this.fabuAreaRadio[val].segment) 
			},
			ywInfoDescOutPutForm(val){/*业务选择，信息选择，描述*/
				if(Array.isArray(val.businessType)){
					this.form.businessType = val.businessType[0];
					this.form.infoType = val.infoType[0];
				}else{
					this.form.businessType = val.businessType;
					this.form.infoType = val.infoType;
				}
				console.log(val.businessType);
				this.form.describe =val.describe;
				this.yunxingPlaneTimeOut=!this.yunxingPlaneTimeOut;
			},
			yunxingPlaneOutPutForm(val){/*运行计划的表单*/
				this.form.smRunPlan = val;
				if(this.secondForm==='2'){
					this.wenJianTimeOutSecondForm=!this.wenJianTimeOutSecondForm;
				}else if (this.secondForm==='3'){
					this.dbtadbTimeOutSecondForm = !this.dbtadbTimeOutSecondForm;
				}
			},
			dbtadbOutPutFormSecondForm(val){/*第二个数据库表单触发的事件*/
				this.form.inServiceDataSource = val;
								
				if(this.thirdForm==='2'){
					this.wenJianTimeOutThirdForm=!this.wenJianTimeOutThirdForm;
				}else if (this.thirdForm==='3'){
					this.dbtadbTimeOutThirdForm = !this.dbtadbTimeOutThirdForm;
				}
			},
			dbtadbOutPutFormThirdForm(val){/*/*第三个数据库表单触发的事件*/
				this.form.outServiceDataSource = val;
				componentCollectFormUpdata(this);
			},
			wenjianOutPutFormSecondForm(val){/*第二个文件表单触发的事件*/
				this.form.specifyValue=val.secondForm.specifyValue;
				this.form.gatherMode=val.secondForm.gatherMode;
				this.form.specifyFileType=val.secondForm.specifyFileType;
				this.form.inServiceDataSource = val.form;
				
				if(this.thirdForm==='2'){
					this.wenJianTimeOutThirdForm=!this.wenJianTimeOutThirdForm;
				}else if (this.thirdForm==='3'){
					this.dbtadbTimeOutThirdForm = !this.dbtadbTimeOutThirdForm;
				}
			},
			wenjianOutPutFormThirdForm(val){/*第三个文件表单触发的事件*/
				this.form.outFileType = val.secondForm.outFileType;
				this.form.outServiceDataSource = val.form;
				componentCollectFormUpdata(this);
			},
			getYwType(){/*获取三种类型的数据*/
				componentGetYwType(this,'');
				componentCollectAll(this);
			},
			chooseResource(val){/*选中资源网段*/
				this.resourceWeb = Number(val);
				this.choosedFbArea = 0;
				componentServerRegisterGetFabuArea(this,val)
			},
			dealUpdata(id){/*处理更新的内容*/
				computedDealCollectUpdata(this,id)
			}
        },
        mounted(){
        	this.getYwType();
        	if(this.updataId!=0){
        		this.dealUpdata(this.updataId);
        	}
        },
        watch:{
        	updataId(newVal){
        		Object.assign(this.$data, this.$options.data())/*重置data数据*/	
						this.dealUpdata(newVal);
        	}
        }
  	};
</script>

<style>
	.collect_server_from .title{
    	height: 30px;
	    border-bottom: dashed 1px #afa4a4;
	    line-height: 20px;
	    font-size: 15px;
	    margin-bottom: 20px;
    }
    .collect_server_from .title span{
    	cursor: pointer;
    	color: #5A8BFF;
    }
    .collect_server_from .title .el-icon-back{
    	margin-right: 15px;
    }
    .collect_server_from  .box_checkbox{
    	margin: 5px !important;
    }
    .collect_server_from  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    
   .collect_server_from  .el-checkbox-button.is-checked .el-checkbox-button__inner{
	   	color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: -1px 0 0 0 #8cc5ff;
   }
   .collect_server_from .second_form {
    background: #f5f5f5;
    padding: 20px;
}
    .fixed_button{
    position: fixed;
    bottom: 0px;
    background: #e0eefd80;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
</style>